<template>
	<div class="container">
		<div class="toolBar">
			<el-input
				class="searchInput"
				prefix-icon="el-icon-search"
				clearable
				v-model="searchIP"
				placeholder="搜索IP..."
			>
			</el-input>
			<el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
		</div>
		<div class="internetReport">
			<el-row :gutter="10" class="netContentRow" type="flex">
				<el-col :span="4" class="textNetBox">
					<div class="gradientBox">
						<p class="titleText">导航</p>
						<p class="navigationBarText">服务器基本信息</p>
						<p class="navigationBarText">表空间使用统计</p>
						<p class="navigationBarText">服务器后台日志</p>
						<p class="navigationBarText">服务器DBA权限用户</p>
						<p class="navigationBarText">SQL语句执行与解析的比率</p>
						<p class="navigationBarText">Parse CPU to Parse Elapsd</p>
						<p class="navigationBarText">Non Parse CPU</p>
						<p class="navigationBarText">服务器总体运行性能（dbtime）</p>
						<p class="navigationBarText">回收站对象统计</p>
						<p class="navigationBarText">碎片检查</p>
					</div>
				</el-col>
				<el-col :span="20" class="mainBox">
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">服务器基本信息</p>
								<v-ServerDataBase></v-ServerDataBase>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">表空间使用统计</p>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">服务器后台日志</p>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">服务器DBA权限用户</p>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">SQL语句执行与解析的比率</p>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">Parse CPU to Parse Elapsd</p>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">Non Parse CPU</p>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">服务器总体运行性能（dbtime）</p>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">回收站对象统计</p>
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="10" class="columnBox">
						<el-col :span="24">
							<div class="gradientBox">
								<p class="titleText">碎片检查</p>
							</div>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
    import { fetchData } from '@/api/index.js';
    import bus from 'common/bus.js';
	import vServerDataBase from './ServerDataBase.vue';
	
export default {
	name: 'report_server',
	components: {
		vServerDataBase,
	},
	data() {
		return {
			searchIP: ''
		};
	},
	methods: {
		handleSearch() {
			console.log('搜索');
		}
	}
};
</script>

<style scoped>
.container{
    /* height: 100%; */
    color: aliceblue;
}
.toolBar {
	display: flex;
	margin-bottom: 14px;
}
.searchInput {
	width: 240px;
	margin-right: 10px;
}
/* .container .internetReport {
	height: calc(100% - 24px);
	display: flex;
	flex-direction: column;
	border: 1px solid rgb(236, 137, 137);
} */

.netContentRow{
    height: 100%;
    color: aliceblue;
}

.mainBox .columnBox {
    /* height: 30%; */
    margin-bottom: 10px;
}
.gradientBox {
    position: relative;
    padding: 7px 10px;
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 0px 24px  rgb(72, 119, 128) inset !important;
}
.navigationBarText{
	color: crimson;
	font-size: large;
}
.gradientBox:last-child {
    margin-bottom: 0;
}
.titleText{
    width: 100%;
	font-size: x-large;
	text-align: center;
	color: mediumblue;
	background-color: mediumspringgreen;
}

/* 导航 */
.textNetBox > div{
	height: 100%;
}
/* 栏目框 */
.columnBox > div {
    height: 100%;
}
/* .textNetBox .gradientBox {
    max-height: calc(100% - 7px * 2);
} */
/* .topRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
/* 中间部分 */
/* .midRow > div {
    height: 100%;
} */
/* .midRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
/* 下部 */
/* .bottomRow > div {
    height: 100%;
} */
/* .bottomRow .gradientBox {
    height: calc(100% - 7px * 2);
} */
</style>
